import styles from "./index.less"
import * as echarts from "echarts"
import mapJSon from "@/unitl/map.json"
import {useEffect, useRef} from "react"

const Map = () => {
    const city = {}
    mapJSon.features.forEach(item => {
        city[item.properties.name] = item.properties.center
    })
    const chart = useRef()
    const data = [
        {name: '万州区', value: 1000},
        {name: '涪陵区', value: 0},
        {name: '渝中区', value: 0},
        {name: '大渡口区', value: 0},
        {name: '江北区', value: 0},
        {name: '沙坪坝区', value: 0},
        {name: '九龙坡区', value: 0},
        {name: '南岸区', value: 0},
        {name: '北碚区', value: 0},
        {name: '綦江区', value: 0},
        {name: '大足区', value: 0},
        {name: '渝北区', value: 0},
        {name: '巴南区', value: 0},
        {name: '黔江区', value: 0},
        {name: '长寿区', value: 0},
        {name: '江津区', value: 0},
        {name: '合川区', value: 0},
        {name: '永川区', value: 0},
        {name: '南川区', value: 0},
        {name: '璧山区', value: 0},
        {name: '铜梁区', value: 0},
        {name: '潼南区', value: 0},
        {name: '荣昌区', value: 0},
        {name: '开州区', value: 0},
        {name: '梁平区', value: 0},
        {name: '武隆区', value: 0},
        {name: '城口县', value: 0},
        {name: '丰都县', value: 0},
        {name: '垫江县', value: 0},
        {name: '忠县', value: 0},
        {name: '云阳县', value: 0},
        {name: '奉节县', value: 0},
        {name: '巫山县', value: 0},
        {name: '巫溪县', value: 0},
        {name: '石柱土家族自治县', value: 0},
        {name: '秀山土家族苗族自治县', value: 0},
        {name: '酉阳土家族苗族自治县', value: 0},
        {name: '彭水苗族土家族自治县', value: 0}
    ]

    const convertData = function (data) {
        console.log(data, "haha")
        const res = [];
        for (var i = 0; i < data.length; i++) {
            const geoCoord = city[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }

        return res;
    };
    echarts.registerMap('china', mapJSon);

    useEffect(() => {
        const myChart = echarts.init(chart.current);
        let option
        option = {
            title: {
                text: '中国地图'
            },
            tooltip: {
                trigger: 'item'
            },
            geo: {
                map: 'china',
                itemStyle: {
                    borderColor: '#333', // 设置轮廓线颜色为深灰色
                    opacity: 0 // 设置轮廓线透明度为0，即完全透明
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#f2d5ad', // 设置鼠标移动到地图区域上时的颜色
                        borderColor: '#f00' // 设置鼠标移动到地图区域上时的边界线颜色
                    }
                }
            },
            series: [{
                name: 'china',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    show: true
                },
                data: data
            }]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize()
        })
    }, [])
    return (
        <div className={styles.container}>
            <div ref={chart} className={styles.map}></div>
        </div>
    )
}
export default Map